Dr. Yang Ye <Email:yy@runchee.com>
Oct 29, 2018
New version in 2018.
What runs inside the cables?
TCP Session
DHCP Session
A family of protocols but what’s most famous/“fundamental” is IP and TCP.
A well-defined network protocles.
IETF (Internet Engineering Task Force) maintains and still gets new protocol approved.
Request
GET /index.html HTTP/1.1
Host: www.example.comResponse
HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Content-Type: text/html; charset=UTF-8
Content-Encoding: UTF-8
Content-Length: 138
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes
Connection: close
<html>
<head>
<title>An Example Page</title>
</head>
<body>
Hello World, this is a very simple HTML document.
</body>
</html>When you have HTML and URL (Uniform Resource Locator), Web is born.
How this resource is used in the document.
<div class="thumbinner" style="width:302px;">
<a href="/wiki/File:Web_Index.svg" class="image">
<img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/65/Web_Index.svg/300px-Web_Index.svg.png"
width="300" height="154" class="thumbimage" />
</a>
</div>
First generation
Browser => HTML/CSS/JavaScript => HTTP => TCP => IP => Network physical.
We will write in R Shiny, which subsequently output HTML/CSS/JavaScript to be run in browser.
Markdown is for humans to write doc, with minimal added to decorate it, created by John Gruber in collaboration with Aaron Swartz in 2004.
A Markdown-formatted document should be publishable as-is, as plain text,
without looking like it's been marked up with tags or formatting instructions. - John Gruber---
title: My first bitcoin
subtitle: and how I bought a pizza!
author: "Gru"
date: "Jul 9, 2010"
---
# How I bought it
I found someone was selling _10000_ on ebay for __$30__.
I think that's
- cool
- fun
- hacker
# How I used it
I forgot to bring my wallet the other day.
So I used **the bitcoins** to buy some pizza.

More hashtag, deeper level.
# Header1
## Header2
### Header3
Give four spaces before it
if (a > 0) {
print(a)
}
if (a > 0) {
print(a)
}
* First paragraph.
Continued.
* Second paragraph. With a code block, which must be indented
eight spaces:
{ code }
First paragraph. Continued.
Second paragraph. With a code block, which must be indented eight spaces:
Put four more spaces for each level.
* fruits
+ apples
- macintosh
- red delicious
+ pears
* vegetables
+ broccoli
Put 4 more spaces for each level.
#. Chapter 1
#. Section 1.1
#. Section 1.2
#. Chapter 2
#. Chapter 3
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
To emphasize some text, surround it with *s or _, like this:
This text is \_emphasized with underscores\_, and this
is \*emphasized with asterisks\*.
Double * or _ produces strong emphasis:
This is \*\*strong emphasis\*\* and \_\_with underscores\_\_.
This text is emphasized with underscores, and this is emphasized with asterisks. Double * or _ produces strong emphasis.
This is strong emphasis and with underscores. A * or _ character surrounded by spaces, or backslash-escaped, will not trigger emphasis.
This ~~is deleted text.~~ This is deleted text.
H~2~O is a liquid. 2^10^ is 1024. H2O is a liquid. 210 is 1024.
Use backtick `. What is the difference between `>>=` and `>>`? What is the difference between >>= and >>?
Note:
A link immediately preceded by a ! will be treated as an image. The link text will be used as the imageâs alt text:

Pizza
MathJax. Use laTex syntax. There are many online references.
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
$$\sum_{i=1}^n X_i$$
\[\sum_{i=1}^n X_i\]
---
title: "Data Analysis Report"
author: "Yang Ye"
date: "October 23, 2018"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## Report
```{r cars}
summary(cars)
```
## Including Plots
```{r pressure, echo=FALSE}
plot(pressure)
```
In the header, you can change the output to other types:
word_document
Ctrl+Shift+K or âKnitrâ
R Markdown is a extension to Markdown that you can execute code among the code. If you name the file as .Rmd and knit in R Studio.
```{r Calculate_7}
a <- 3
b <- 4
print(a + b)
```## [1] 7
Calculate_7 is the chunk name. It’s optional to give a chunk name. If included, each code chunk needs a distinct name. Itâs usually best to give each code chunk a name, for easier debug.
R code can also be inline. For example, to generate a random number everytime, include this `runif(1, 0, 1)`, 0.8645502.
include is to hide both code and result, default is FALSE.
```{r cars, echo = TRUE}
a <- runif(100, 0, 1)
```
```{r plot}
plot(a)
``````{r kable}
knitr::kable(
mtcars[1:5, ],
caption = "A knitr kable."
)
```
| mpg | cyl | disp | hp | drat | wt | qsec | vs | am | gear | carb | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Mazda RX4 | 21.0 | 6 | 160 | 110 | 3.90 | 2.620 | 16.46 | 0 | 1 | 4 | 4 |
| Mazda RX4 Wag | 21.0 | 6 | 160 | 110 | 3.90 | 2.875 | 17.02 | 0 | 1 | 4 | 4 |
| Datsun 710 | 22.8 | 4 | 108 | 93 | 3.85 | 2.320 | 18.61 | 1 | 1 | 4 | 1 |
| Hornet 4 Drive | 21.4 | 6 | 258 | 110 | 3.08 | 3.215 | 19.44 | 1 | 0 | 3 | 1 |
| Hornet Sportabout | 18.7 | 8 | 360 | 175 | 3.15 | 3.440 | 17.02 | 0 | 0 | 3 | 2 |
```{r plot1, echo = FALSE}
a <- filter(cars, speed > 4)
plot(a)
```
I removed everything in functions server and ui. This is the minimal Shiny. (shiny-1-empty.R)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
Let’s add a minimal sidebarLayout (shiny-2-sidebar.R)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(sidebarLayout(
sidebarPanel("This is a panel on the side"),
mainPanel("This is the main panel")
)),
fluidPage(sidebarLayout(
sidebarPanel("This is a panel on the side"),
mainPanel("This is the main panel")
))
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
fluidPagefluidPage function can take any number of input parameters.
fluidPage(sidebarLayout(
sidebarPanel(),
mainPanel()
))titlePanel("Hello Shiny!"), h1("Introduction to Layout"), h2("Sidebar Layout") (shiny-3-sidebar-min.R)library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
h1("Introduction to Layout"),
h2("Sidebar Layout")
),
mainPanel(
img(src = "p19-Hero-Image-796x398.jpg")
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
fluidPage(
sidebarLayout(position = "right",
sidebarPanel(),
mainPanel()
)
)
Sidebar with more tags (shiny-3-sidebar.R)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
h1("Introduction to Layout"),
h2("Sidebar Layout"),
a("A link to Google", href="http://www.google.com"),
# unordered list
tags$ul("About",
tags$li("Who are we"),
tags$li("What we do")
),
# ordered list
tags$ol("Steps",
tags$li("Write"),
tags$li("Run")
)
),
mainPanel(
img(src = "p19-Hero-Image-796x398.jpg")
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
h1("A header")
p("some text as a paragraph")
a("A link to Google", href="http://www.google.com")
img(src = "p19-Hero-Image-796x398.jpg", width = "100%")
tags$ul("title", tags$li("Item 1"), tags$li("Item 2"))
tags$ol("Step", tags$li("Item 1"), tags$li("Item 2"))
Note:
www together with the R source file. Place the file under it.tags$img(), even img() is available to use.titlePanel() and wellPanel() (shiny-4-wellPanel.R)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
h1("Well 1"),
wellPanel(
h2("Well 1.1"),
actionButton("goButton", "Go!")
),
h1("Well 2"),
wellPanel(
h2("Well 2.1"),
actionButton("goButton2", "Go!")
)
),
mainPanel(
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
navlistPanel(
"Header A",
tabPanel("Section 1",
h1("Section 1"),
p("This is section 1. First lecture in FE8828.")),
tabPanel("Section 2",
h1("Section 2")),
"Header B",
tabPanel("Section 3",
h1("Section 3")),
"-----",
tabPanel("Component 5")
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
tabsetPanel(
tabPanel("Plot", h1("plot")),
tabPanel("Summary", h1("summary")),
tabPanel("Image", img(src = "p19-Hero-Image-796x398.jpg"))
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
ui <- fluidPage(
fluidPage(
navbarPage(title = "Runchee Technology",
tabPanel("Product",
titlePanel("Hello!"),
"One more thing!"),
tabPanel("About us",
titlePanel("Hello!"),
"Exordinary people"),
navbarMenu(title = "Contact Us",
tabPanel("Address", "3/4 platform"),
tabPanel("Phone", "+123.456")
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
ui <- fluidPage(
fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
fluidRow(
column(4,
wellPanel(
dateInput("date", "How's weather today?")
)
),
column(6,
h3("Plot"),
wellPanel(plotOutput("distPlot"))
),
column(2, h3("Extra"),
wellPanel(plotOutput("extraPlot"))
)
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
library(ggplot2)
ui <- fluidPage(
fluidPage(
fluidPage(
title = "Diamonds Explorer",
fluidRow(
column(12,
img(src = "p19-Hero-Image-796x398.jpg", width = "100%")
)
),
hr(),
fluidRow(
column(3,
h4("Diamonds Explorer"),
sliderInput('sampleSize', 'Sample Size',
min=1, max=nrow(diamonds), value=min(1000, nrow(diamonds)),
step=500, round=0),
br(),
checkboxInput('jitter', 'Jitter'),
checkboxInput('smooth', 'Smooth')
),
column(4, offset = 1,
selectInput('x', 'X', names(diamonds)),
selectInput('y', 'Y', names(diamonds), names(diamonds)[[2]]),
selectInput('color', 'Color', c('None', names(diamonds)))
),
column(4,
selectInput('facet_row', 'Facet Row', c(None='.', names(diamonds))),
selectInput('facet_col', 'Facet Column', c(None='.', names(diamonds)))
)
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
---
title: "MFE FE8828 Assignment 1"
date: 2018-11-03
output: html_document
runtime: shiny
---
```{r setup, include = FALSE}
```
# Use echo = TRUE for assignment is an exception, so code is visible.
```{r, echo = TRUE}
wellPanel("Inputs",
numericInput("fav_num", "What's your favorite number?", 3))
```
This is interactive document.